<template>
  <div class="venus-list-page">
    <!--业绩报酬支取查询界面-->
    <div class="page-search">
      <el-row type="flex" justify="space-between" class="page-list-head">
        <div class="title">业绩报酬支取查询</div>
      </el-row>
      <el-row type="flex" class="search-list">
        <el-row type="flex" class="list-items">
          <div class="venus-input-box">
            <label>查询日期</label>
            <el-date-picker
              v-model="table.valPerFormence_table.end_date"
              type="date"
              class="venus-input-middle venus-input-date"
              placeholder="请输入日期"
              value-format="yyyyMMdd"
            />
          </div>
          <div class="venus-input-box">
            <label>产品组合</label>
            <el-select
              v-model="table.valPerFormence_table.t8_sys_portfol_id"
              placeholder="请选择"
              @change="portfol_change_fnc"
            >
              <el-option
                v-for="item in dict.t8_port_info_id"
                :key="item.value"
                :label="item.dtype + '-' + item.text"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="venus-input-box">
            <label>理财产品</label>
            <el-select
              v-model="table.valPerFormence_table.t8_prod_info_id"
              placeholder="请选择">
              <el-option
                v-for="item in dict.prod_code"
                :key="item.value"
                :label="item.value + '-' + item.text"
                :value="item.value"
              />
            </el-select>
          </div>
        </el-row>
        <!--      </el-row>-->
        <!--      <el-row type="flex" justify="end">-->

      </el-row>
      <el-row type="flex" class="list-items" justify="space-content">
        <div class="venus-btn-box">
          <el-button type="primary" @click="search">查询</el-button>
        </div>
        <div class="venus-btn-box">
          <el-button type="primary" @click="reset">重置</el-button>
        </div>
      </el-row>
    </div>
    <!--    查询列表返显-->
    <div class="page-list">
      <table-pagination
        :table-data="table.valPerFormence_table.tableData"
        :table-header-config="table.tableHeaderConfig"
        highlight-current-row
        :total="table.valPerFormence_table.total"
        :page-size="table.valPerFormence_table.pageSize"
        :now-page="table.valPerFormence_table.nowPage"
        :operation-config="table.valPerFormence_table.operationConfig"
      />
    </div>
    <!--提前兑付弹出框-->
    <el-dialog :title="dialog.dlgTilte" :visible.sync="dialog.dlgFormVisible">
      <!-- ref=dlgForm用于验证表单 -->
      <el-form ref="dlgForm" :model="dialog.form" size="mini">
        <el-row>
          <el-col :xs="0" :sm="0" :md="0">
            <el-input v-model="dialog.form.t8_sys_portfol_id" :disabled="true" type="hidden" />
            <el-input v-model="dialog.form.t8_prod_info_id" :disabled="true" type="hidden" />
            <el-input v-model="dialog.form.t8_sys_adtype_id" :disabled="true" type="hidden" />
            <el-input v-model="dialog.form.t8_sys_acceven_id" :disabled="true" type="hidden" />
          </el-col>
          <el-col :xs="24" :sm="12" :md="12">
            <!-- prop,:rules必须一起写 -->
            <el-form-item
              label="产品代码"
              :label-width="dialog.dlgFormLabelWidth"
              prop="prod_code"
              :rules="dialog.formRules.prod_code"
            >
              <el-input v-model="dialog.form.prod_code" disabled />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12">
            <!-- prop,:rules必须一起写 -->
            <el-form-item
              label="产品名称"
              :label-width="dialog.dlgFormLabelWidth"
              prop="prod_name"
              :rules="dialog.formRules.prod_name"
            >
              <el-input v-model="dialog.form.prod_name" disabled />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12">
            <!-- prop,:rules必须一起写 -->
            <el-form-item
              label="业绩报酬余额"
              :label-width="dialog.dlgFormLabelWidth"
              prop="feepaybln"
              :rules="dialog.formRules.feepaybln"
            >
              <el-input v-model="dialog.form.feepaybln" disabled />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="支取日期"
              :label-width="dialog.dlgFormLabelWidth"
              prop="change_date"
              :rules="dialog.formRules.change_date"
            >
              <el-date-picker
                v-model="dialog.form.change_date"
                type="date"
                class="venus-input-middle venus-input-date"
                placeholder="请输入日期"
                value-format="yyyyMMdd"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12">
            <!-- prop,:rules必须一起写 -->
            <el-form-item
              label="费用支取"
              :label-width="dialog.dlgFormLabelWidth"
              prop="fee_money"
              :rules="dialog.formRules.fee_money"
            >
              <el-input v-model="dialog.form.fee_money"  />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="success" @click="payOk">确 定</el-button>
        <el-button type="info" plain @click="dialog.dlgFormVisible=false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import request from '../../../../../utils/request'
  import * as kk from '../../../../../utils/k-utils'

  export default {
    name: 'ValPerformenceDraw',
    data() { // 数据定义
      return {
        // 字典
        dict: {
          // 数据字典获取
          t8_port_info_id: [],
          prod_code: []
        },
        // 表格
        table: {
          tableHeaderConfig: [ // 表头配置
            { prop: 'prod_code', label: '产品代码' },
            { prop: 'prod_name', label: '产品名称' },
            { prop: 'feepaybln', label: '业绩报酬余额' },
            { prop: 'settle_date', label: '计提日期' }
          ],
          valPerFormence_table: {
            formRules: {
              end_date: [
                { required: true, message: '该输入项不允许为空', trigger: 'blur' }]
            },
            limit: 5, // 分页配置
            total: 0, // 数据总条数
            nowPage: 1, // 当前页
            tableData: [], // 表格数据
            exeid: 'M8124EQ001', // exeid
            // 以下是查询参数
            t8_sys_portfol_id: '',
            t8_prod_info_id: '',
            end_date: '20200221',
            operationConfig: { // 表格操作配置
              fixed: 'left',
              width: 200,
              operationButton: [
                // value:操作文字； func:回调函数
                { value: '业绩报酬支取', func: this.pay }
              ]
            }
          }
        },
        /* ===========业绩报酬支取=============== */
        dialog: {
          dlgTilte: '标题',
          dlgFormVisible: false,
          dlgFormLabelWidth: '160px',
          formRules: {
            prod_code: [
              { required: true, message: '请输入产品代码', trigger: 'blur' }
            ],
            prod_name: [
              { required: true, message: '请输入产品名称', trigger: 'blur' }
            ],
            feepaybln: [
              { required: true, message: '请输入业绩报酬余额', trigger: 'blur' }
            ],
            change_date: [
              { required: true, message: '请输入支取日期', trigger: 'blur' }
            ],
            fee_money: [
              { required: true, message: '请输入费用支取', trigger: 'blur' }
            ],
          },
          form: {
            t8_prod_info_id: '', // 产品id
            t8_sys_portfol_id: '', // 投组id
            t8_sys_adtype_id: '', // 品种ID
            t8_sys_acceven_id: '', // 会计事件id
            prod_code: '', // 产品代码
            prod_name: '', // 产品名称
            feepaybln: '', // 业绩报酬余额
            change_date: '', // 支取日期
            fee_money: '' // 费用支取
          }
        }
      }
    },
    mounted() {
      // 初始化调用
      this.init()
    },
    methods: {
      init: function() {
        this.load_dict_exeid(this, 'public', 'selectPortfol', 't8_port_info_id')
        /* 加载表格数据 */
        this.table.valPerFormence_table.nowPage = 1 // 初始第一页
        kk.k_load_table(this, 'valPerFormence_table', 'val')
      },
      search() { // 查询函数
        /* 加载表格数据 */
        this.table.valPerFormence_table.nowPage = 1 // 初始第一页
        kk.k_load_table(this, 'valPerFormence_table', 'val')
      },
      reset() { // 重置函数
        this.table.valPerFormence_table.t8_prod_info_id = ''
        this.table.valPerFormence_table.t8_sys_portfol_id = ''
      },
      pay(params) { // 业绩报酬支取函数
        this.dialog.dlgTilte = '提前兑付'
        this.dialog.dlgOkHandler = 'popOk' // 自己定义调用那个函数
        params.change_date = '20200221' // 支取时间
        this.copyObj(params, this.dialog.form)
        this.dialog.dlgFormVisible = true
      },
      payOk() {
        // 获取全局对象数据
        var bean = this.dialog.form
        var _this = this
        this.send_save(bean).then(rep => {
          _this.search()
          // 关闭弹出框
          _this.dialog.dlgFormVisible = false
        })
      },
      // 发送保存
      send_save(params) {
        params.exeid = 'valEI_001'
        params.t8_sys_acceven_id = 107// 会计事件
        params.t8_sys_adtype_id = 33 // 品种
        return request({
          loading: true,
          url: 'val/base/comn-update.json',
          method: 'post',
          params: params
        })
      },
      portfol_change_fnc(val) { // 选择了产品组合之后加载产品信息
        this.load_dict_exeid_byParams(this, 'public', { t8_sys_portfol_id: val, end_date: this.table.valPerFormence_table.end_date }, 'selectProd_query_terms', 'prod_code')
      },
      /* 通过exeid加载字典 */
      load_dict_exeid_byParams(this_object, service_name, params, exeid, dict) {
        request({
          loading: true,
          url: service_name + '/base/comn-query.json?exeid=' + exeid,
          method: 'post',
          params: params
        }).then(rep => {
          this_object['dict'][dict] = rep.rows
        })
      },
      /* 通过exeid加载字典 */
      load_dict_exeid(this_object, service_name, exeid, dict) {
        request({
          loading: true,
          url: service_name + '/base/comn-query.json?exeid=' + exeid,
          method: 'post'
        }).then(rep => {
          this_object['dict'][dict] = rep.rows
        })
      },
      /*
       * 将obj1对象的数据拷贝到obj对象
       */
      copyObj(obj1, obj2) {
        for (var key in obj1) {
          if (key === '__proto__') {
            continue
          }
          obj2[key] = obj1[key]
        }
      },
    }
  }
</script>

<style scoped>
</style>
